import React, { PureComponent, Fragment } from 'react'
import PropTypes from 'prop-types'
import { Table, Modal, Button, Icon, Tooltip, Pagination } from 'antd'
// import { DropOption } from 'components'
import { Trans, withI18n } from '@lingui/react'
// import Link from 'umi/link'
import styles from './List.less'

// const { confirm } = Modal
// const ButtonGroup = Button.Group

const IconFont = Icon.createFromIconfontCN({
  scriptUrl: '//at.alicdn.com/t/font_1315809_rku89owijgs.js',
})

@withI18n()
class List extends PureComponent {
  render() {
    const {
      isMobile,
      onDeleteItem,
      onEditItem,
      onRecovery,
      choosedproject,
      i18n,
      canedit,
      pagination,
      onChange,
      ...tableProps
    } = this.props
    const isrecycle = choosedproject == 'recycle'
    const handleMenuClick = (record, e) => {
      onEditItem(record)
    }
    const handleRecovery = (record, e) => {
      onRecovery(record)
    }
    const columns = [
      {
        title: <Trans>DeviceName</Trans>,
        dataIndex: 'DeviceName',
        key: 'DeviceName',
        width: 100,
      },
      {
        title: <Trans>Connection Status</Trans>,
        dataIndex: 'Lined',
        key: 'Lined',
        render: (text, record) => {
          const filterprops = {
            '0': (
              <Tooltip title={<Trans>Unconnected</Trans>}>
                <IconFont type="icon-jichuguanli" style={{ color: 'gray' }} />
              </Tooltip>
            ),
            '1': (
              <Tooltip title={<Trans>Connection Successful</Trans>}>
                <IconFont
                  type="icon-jichuguanli"
                  style={{ color: '#87d068' }}
                />
              </Tooltip>
            ),
            '-1': (
              <Tooltip title={<Trans>Connection Failed</Trans>}>
                <IconFont type="icon-jichuguanli" style={{ color: '#f50' }} />
              </Tooltip>
            ),
            '-2': (
              <Tooltip title={<Trans>Connection Timed Out</Trans>}>
                <IconFont type="icon-jichuguanli" style={{ color: '#f50' }} />
              </Tooltip>
            ),
            '-3': (
              <Tooltip title={<Trans>Connecting</Trans>}>
                <IconFont
                  type="icon-jichuguanli"
                  style={{ color: 'rgb(250,170,20)' }}
                />
              </Tooltip>
            ),
            true: (
              <Tooltip title={<Trans>Audited Host</Trans>}>
                <IconFont
                  type="icon-jizhanguanli"
                  style={{ color: 'rgb(145,199,174)' }}
                />
              </Tooltip>
            ),
            false: (
              <Tooltip title={<Trans>Unaudited host</Trans>}>
                <IconFont type="icon-jizhanguanli" style={{ color: 'gray' }} />
              </Tooltip>
            ),
          }
          return filterprops[`${text}`]
        },
      },
      {
        title: <Trans>Online</Trans>,
        dataIndex: 'Online',
        key: 'Online',
        render: (text, record) => {
          const isonline = text == '1'
          return (
            <Tooltip
              title={
                isonline ? <Trans>On-line</Trans> : <Trans>Off-line</Trans>
              }
            >
              <IconFont
                type="icon-fuwudiqiu"
                style={{ color: isonline ? '#87d068' : 'gray' }}
              />
            </Tooltip>
          )
        },
        width: 70,
      },
      {
        title: <Trans>Timer</Trans>,
        dataIndex: 'ReportTotalTime',
        key: 'ReportTotalTime',
        width: 70,
      },
      {
        title: <Trans>TimerToday</Trans>,
        dataIndex: 'TimerToday',
        key: 'TimerToday',
        width: 70,
      },
      {
        title: <Trans>PublishTime</Trans>,
        dataIndex: 'PublishTime',
        key: 'PublishTime',
        // width: 120
      },
      {
        title: <Trans>Operation</Trans>,
        key: 'operation',
        width: 70,
        fixed: 'right',
        render: (text, record) => {
          const btn = (
            <Button
              icon="edit"
              type="primary"
              disabled={!canedit}
              onClick={e => {
                handleMenuClick(record, e)
              }}
            >
              &nbsp; <Trans>Edit</Trans>
            </Button>
          )
          return (
            // <ButtonGroup>
            !canedit ? (
              <Tooltip
                trigger="hover"
                placement="left"
                title={
                  <Trans>
                    Sorry, you don't have permission to operate this device
                  </Trans>
                }
              >
                {btn}
              </Tooltip>
            ) : (
              btn
            )
            // {/* <Button icon="bell" /> */ }
            // </ButtonGroup>
          )
        },
      },
    ]

    const recyclecolumns = [
      {
        title: <Trans>DeviceName</Trans>,
        dataIndex: 'DeviceName',
        key: 'DeviceName',
        width: 100,
      },
      {
        title: <Trans>PublishTime</Trans>,
        dataIndex: 'PublishTime',
        key: 'PublishTime',
        // width: 120
      },
      {
        title: <Trans>Operation</Trans>,
        key: 'operation',
        dataIndex: 'cant_restore_reason',
        width: 70,
        fixed: 'right',
        render: (text, record) => {
          const btn = (
            <Button
              disabled={text != undefined}
              onClick={e => {
                handleRecovery(record, e)
              }}
            >
              <Icon type="sync" />
              &nbsp;<Trans>Recovery</Trans>
            </Button>
          )
          return (
            // <ButtonGroup>
            text != undefined ? (
              <Tooltip trigger="hover" placement="left" title={text}>
                {btn}
              </Tooltip>
            ) : (
              btn
            )
            // </ButtonGroup>
          )
        },
      },
    ]

    return (
      <div>
        <Table
          {...tableProps}
          size="small"
          pagination={false}
          className={styles.table}
          bordered
          scroll={isrecycle ? {} : { x: 700 }}
          columns={choosedproject == 'recycle' ? recyclecolumns : columns}
          simple
          rowKey={record => record.id}
        />
        <Pagination
          {...{
            size: 'small',
            ...pagination,
            onChange,
            onShowSizeChange: onChange,
            showTotal: total => i18n.t`Total ${total} Items`,
          }}
          showQuickJumper={true}
          simple={isMobile}
          hideOnSinglePage={true}
          style={{
            width: '100%',
            height: 30,
            display: 'flex',
            justifyContent: 'center',
            marginTop: 10,
          }}
        />
      </div>
    )
  }
}

List.propTypes = {
  onDeleteItem: PropTypes.func,
  onEditItem: PropTypes.func,
  location: PropTypes.object,
}

export default List
